{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div class="bs-example" data-example-id="simple-panel">
            <div class="panel panel-default">
            <div class="col-xs-12"><h4>任务管理</h4></div>
                <div class="panel-body">
                    <div>
                        <form id="form_add">
                            <div class="clearfix">
                                {% for field in form %}
                                    <div class="col-xs-6">
                                        <label for="inputEmail3" class="col-sm control-label"><span
                                                class="glyphicon glyphicon-ok"
                                                aria-hidden="true"></span> {{ field.label }}:</label>
                                        {{ field }}
                                        <span style="color: red"  class="error_msg"></span>
                                    </div>
                                {% endfor %}
                                <div class="col-xs-12">
                                    <input type="button" value="提交" style="margin-top: 20px" class="btn btn-primary" id="form_btn">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <h3>ajax学习</h3>
        <input type="button" value="dom绑定提交" onclick="to_ajax()">
        <input type="button" value="jquery绑定提交" id="btn-2">
        <h3>案例2</h3> <!-- 用id获取值提交 data: {name:$('#name').val()} -->
        <input type="text" id="name">
        <input type="button" value="提交" id="btn-3">
        <h3>案例3</h3> <!-- 用form的id批量获取值提交  data: $('#group_info').serialize(),不用手动去给每个字典获取值 -->
        <form id="group_info">
            <input type="text" name="username">
            <input type="text" name="age">
            <input type="text" name="gender">
            <input type="text" name="emil">
            <input type="text" name="info">
        </form>
        <input type="button" value="提交" id="btn-4">
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            // 页面框架加载完成后自动执行
            btn_bind2();
            btn_bind3();
            btn_bind4();
            btn_bindadd();
        })

        // 通过jQuery找到id绑定事件
        function btn_bind2() {
            $('#btn-2').click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'get',
                    data: {
                        n1: 21,
                        n2: 43
                    },
                    success: function (res) {
                        console.log(res)
                    }
                })
            })
        }

        function btn_bind3() {
            $('#btn-3').click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: {
                        name: $('#name').val()
                    },
                    success: function (res) {
                        console.log(res)
                    }
                })
            })
        }

        function btn_bind4() {
            $('#btn-4').click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: $('#group_info').serialize(),
                    success: function (res) {
                        console.log(res)
                    }
                })
            })
        }

        function btn_bindadd() {
            $('#form_btn').click(function () {
              $('.error_msg').empty();
             //  $('#err_id').text('');

                $.ajax({
                    url: '/task/add/',
                    type: 'post',
                    data: $('#form_add').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if(res.status=='True'){
                            alert('添加成功')
                        }
                        else {
                            $.each(res.error,function (name,data){
                                console.log(name,data)
                                $('#id_'+name).next().text(data)
                            })
                        }
                    }
                })
            })
}
        // 直接dom绑定事件
        function to_ajax() {
            $.ajax({
                url: '/task/ajax/',
                type: 'post',
                dataType: "JSON",
                data: {
                    n1: 21,
                    n2: 43
                },
                success: function (res) {
                    console.log(res);
                    console.log(res.name);
                }
            })
        }

    </script>
{% endblock %}